<template>
  <div id="find_pass">
    <v-xheader></v-xheader>
    <div class="dis60"></div>
    <div >
      <div class="find_pass_wrap">
        <div class="find_pass_form_wrap" >
          <div style="width: 350px ;margin: 0 auto">
          <div class="dis10"></div>
          <ul class="find_pass_tab">
            <li class="cur">找回密码</li>
          </ul>
          <div class="dis20"></div>
          <el-form :model="findPassForm"
                   :rules="findPassRules"
                   ref="findPassForm"
          >
            <el-form-item prop="mobile">
              <el-input type="text"
                        :maxlength="30"
                        placeholder="请输入手机号"
                        v-model="findPassForm.mobile">
              </el-input>
            </el-form-item>
            <el-form-item>
              <div id="geecase" style="width: 100%;"></div>
            </el-form-item>
            <el-form-item prop="rzcode">
              <el-input v-model="findPassForm.rzcode">
                <el-button slot="append"
                           class="font-blackgr"
                           :disabled="code_status"
                           @click.prevent="send_code">
                  {{ code_wait>0 ? code_wait + '秒后重新获取' : '获取验证码' }}
                </el-button>
              </el-input>
            </el-form-item>

            <el-form-item prop="upass">
              <el-input type="password"
                        :maxlength="16"
                        placeholder="请输入密码"
                        v-model="findPassForm.upass">
              </el-input>
            </el-form-item>
            <el-form-item prop="upass">
              <el-input type="password"
                        :maxlength="16"
                        placeholder="确认密码"
                        v-model="findPassForm.upass2">
              </el-input>
            </el-form-item>
            <div class="dis15"></div>
            <el-form-item>
              <el-button type="primary" style="width:100%;"
                         @click="submitForm">
                找回密码
              </el-button>
            </el-form-item>
          </el-form>
          <div style="overflow: hidden;font-size: 12px;">
            <div style="float: right;">
              <router-link to="/login">
                <span class="font-blue">&lt;返回登录</span>
              </router-link>
            </div>
          </div>
        </div>

        </div>
        <div class="dis20"></div>



      </div>
    </div>
  </div>
</template>
<script>
  import {cacheConfig} from '@cache'
  export default{
    name:'findPass',
    data(){
      const validateUname = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入手机号'))
          return false
        }
        if (!this.is_mobile(value)) {
          callback(new Error('请输入正确的手机号格式'))
          return false
        }
        callback()
      }
      const validateUpass2 = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请填写确认密码'))
          return false
        }
        if (value.length < 6) {
          callback(new Error('密码不能少于6位'))
          return false
        }
        if (value !== this.findPassForm.upass) {
          callback(new Error('两次密码输入不一致'))
          return false
        }
        callback()
      }
      const validateRzcode = (rule, value, callback) => {
        //      if (!this.isClickGet) {
        if (!this.is_mobile(this.findPassForm.mobile) ) {
          callback(new Error('请输入正确的手机号格式'))
          return false
        }
        //      }
        if (!this.findPassForm.captcha) {
          callback(new Error('请先点击按钮验证'))
          return false
        }
        if (!this.isClickGet) {
          if (!value||value.length!=6) {
            callback(new Error('请输入6位验证码'))
            return false
          }
        }
        callback()
      }
      return{
        findPassForm:{
          mobile:"",
          captcha:false,
          rzcode:'',
          upass:"",
          upass2:""
        },
        config:{},
        code_wait:0,
        code_status:false,
        isClickGet:false,
        findPassRules:{
          mobile: [
            { validator: validateUname, trigger: 'blur' }
          ],
          upass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, message: '密码不能少于6位', trigger: 'blur' }
          ],
          upass2: [
            { validator: validateUpass2, trigger: 'blur' }
          ],
          rzcode: [
            { validator: validateRzcode, trigger: 'blur' }
          ]
        }
      }
    },
    methods:{
      submitForm(){
        this.$refs['findPassForm'].validate((valid) => {
          if (valid) {
            this.$api.post('account.find_pass',this.findPassForm).then(res=>{
              if(res.status===1){
                this.$success(res.msg)
                setTimeout(function () {
                  this.$router.push({'path':'/login'})
                }.bind(this),500)
              }else{
                this.$error(res.msg)
              }

            })
          }
        })
      },
      send_code(){
        let that=this
        this.isClickGet=true
        let waittime = () => {
          if (that.code_wait > 0) {
            that.code_wait = that.code_wait - 1
            setTimeout(function () {
              waittime()
            }, 1000)
          } else {
            that.code_wait = 0
            that.code_status = false
          }
        }

        that.$refs.findPassForm.validateField('rzcode', function (valid) {
          if(!valid&& that.code_wait == 0){
            let params = {
              mobile:that.findPassForm.mobile,
              captcha:that.findPassForm.captcha
            }
            that.$api.post("account.send_find_code",params).then(res=>{
              if(res.status===1){
                that.isClickGet = false
                that.code_status = true
                that.code_wait = 60
                waittime()
                that.$success("发送成功")

              }else{
                that.$error(res.msg)

              }
            })

          }

        })
      },

      geeYz () { // 极验验证
        let that = this
        that.$api.post('account.validate/init').then((res) => {
          if (res.status === 1) {
            window.initGeetest({
              product: 'popup',
              // 以下配置参数来自服务端 SDK
              gt: res.data.gt,
              challenge: res.data.challenge,
              offline: !res.data.success,
              new_captcha: res.data.new_captcha,
              width: '100%'
            }, that.callGeeYz)
          }
        })
      },
      callGeeYz (captchaObj) { // 调用极验验证
        let that = this
        // 这里可以调用验证实例 captchaObj 的实例方法
        captchaObj.appendTo('#geecase')
        captchaObj.onSuccess(function () {
          var result = captchaObj.getValidate()
          if (!result) {
//          that.$message.error('请先完成验证')
          }
          that.$api.post('account.validate/check', result).then((res) => {
            if (res.status === 1) {
              that.findPassForm.captcha = true
            }
          })
        })
        captchaObj.onError(function () {
//        that.$Message.error('验证出错,请稍后重试')
        })
      },
      is_mobile(v){
        return /^1\d{10}$/.test(v)
      },

    },
    mounted(){
      this.geeYz()
      this.config = cacheConfig.load()
      let that=this
      document.onkeydown=function(e){
        if(e && e.keyCode==13){ // enter 键
          that.submitForm()
        }
      }
    }

  }
</script>
<style scoped lang="scss">
  #find_pass { min-height:800px;height: 100%; background:#fff;position: relative}
  .find_pass_wrap {
    margin: 0px auto;
    background-color:#fff;}
  .find_pass_form_wrap {
    height: 710px;
    border-radius: 0px;}
  ul.find_pass_tab {border-bottom:solid 1px #efefef;}
  ul.find_pass_tab li {display:inline-block; padding: 0 12px; height: 32px; line-height:32px;}
  ul.find_pass_tab li.cur {color:#212121;font-weight: 700;border-bottom:solid 2px #777;}

</style>
